<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <top-filter :title="reportName" ref="topFilter">
      <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filterN" type="planArea"></double-check-filter>
      <single-list-filter @confirmSingleSelect="hospLevelSelect" :isParentLinkChild="true" defaultText="医院等级" :filter="filterN" type="hospLevel"></single-list-filter>
      <single-list-filter-without-cb  :defaultText="'医疗类别'" :filter="filterN" :type="'insuredType'" @confirmSingleSelect="confirmSingleSelect"></single-list-filter-without-cb>
    </top-filter>
    <div class="chart-container" v-show="isShowChart">
      <div id="myChart5" class="chart-type1"></div>
      <Summarize :showSummarizeText="conclusion"></Summarize>
    </div>
  </div>
</template>

<script>
  import {setChartHeight,loadingOpt,isJanuary} from '../../../assets/js/utils.js'
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  import {getChartItem5} from "../../../api/api";

  export default {
    name: 'chart5',
    props:['isChange','filter'],
    data () {
      return {
        filterN: JSON.parse(JSON.stringify(this.filter)),
        conclusion:'',
        reportName:'2013年-2018年参保患者个人支出比例增长趋势分析',
        areaCode:'',
        medicalCategory:'',
        hospLevel:this.filter.nc.hospitalRankType[1].selectId,
        isShowChart:true,
        height:400
      }
    },
    components:{
      SingleListFilter,
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb
    },
    mounted(){
      let areaCode = []
      this.filter.nc.planArea.map((item,index)=>{
        if(index>0&&index<=6){
          areaCode.push(item.selectId)
        }
      })
      this.areaCode = areaCode.join(',');
      setChartHeight();
      this.myChart = this.$echarts.init(document.getElementById('myChart5') ,null, {renderer: 'canvas'})
      this.getData();
      let that = this;
      this.myChart.on('legendselectchanged',function(params){
        let option = this.getOption();
        let select_key = Object.keys(params.selected);
        if (!params.selected[params.name]) {
          select_key.map(res => {
            option.legend[0].selected[res] = true;
          });
        } else {
          select_key.map(res => {
            option.legend[0].selected[res] = true;
          });
          option.legend[0].selected[params.name] = true;
        }
        let legend = []
        that.myChart.dispatchAction({
          type: 'legendselectchanged',
          batch: legend
        });
        that.myChart.setOption(option)
      })
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          setChartHeight();
          setTimeout(()=>{
            this.myChart.resize();
          },10)
        },101)
      }
    },
    methods:{
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      },
      planAreaSelect(filter){
        //统筹区
        this.areaCode = filter.join(',');
        this.getData();
      },
      hospLevelSelect(filter){
        //医院级别
        this.hospLevel = filter.join(',');
        this.getData();
      },
      confirmSingleSelect(filter){
        //医疗类别
        this.medicalCategory = filter;
        this.getData();
      },
      getData(){
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.myChart.clear();
          this.myChart.showLoading(loadingOpt)
          getChartItem5('report/psnExpRateGrowthTrendAnalysis',this.areaCode, this.medicalCategory, this.hospLevel).then(response=>{
            let json = response.data;
            if(response.code==0){
              this.isShowChart = true;
              this.myChart.hideLoading();
              this.reportName = json.reportName;
              this.conclusion = json.reportConclusion;
              this.drawLine(json)
            }else{
              this.isShowChart = false;
            }
          }).catch(res=>{
            // console.log(res)
            /*this.isShowChart = false;*/
          })
        },300)
      },
      drawLine(json){
        // 格式化负增长数据，为0时设为空
        json.negativeIncreaseQuotaList.map((item,index)=>{
          if(item==0){
            json.negativeIncreaseQuotaList[index]=''
          }
        })
        // 基于准备好的dom，初始化echarts实例
        // 绘制图表
        let boundaryNum = isJanuary();
        this.myChart.setOption({
          title:{
            show:false,
            subtext: '单位 : %',
            left:'82%',
            top:'26%',
            x:'left',
            subtextStyle:{
              color:'#fff'
            }
          },
          // Make gradient line here
          // Make gradient line here
          grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              height:65,
              top:35,
              left:60,
              right:50,
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              top:123,
              bottom:40,
              right:35,
              left:40,
              tooltip: {
                show:false,
              }
            }
          ],
          legend: {
            top: '95%',
            left:'center',
            icon:'rect',
            itemWidth: 30,
            itemHeight: 6,
            itemGap: 20,
            data:['个人支出比例','增长额(正)',{
              name:'增长额(负)',
            }],
            textStyle:{
              color:'#fff'
            },
            tooltip: {
              show: true,
              formatter:function(params){
                let txt = '';
                if(params.name=='增长额(正)'){
                  txt = '即区域内医疗机构患者个人医疗支出比例增</br>长额 = 区域内医疗机构本年度患者个人医疗</br>支出比例 - 区域内医疗机构上年度患者个人</br>医疗支出比例'
                }else if(params.name=='增长额(负)'){
                  txt = '即区域内医疗机构患者个人医疗支出比例增</br>长额 = 区域内医疗机构本年度患者个人医疗</br>支出比例 - 区域内医疗机构上年度患者个人</br>医疗支出比例'
                }else{
                  txt = '即区域内患者个人医疗支出所占比例'
                }
                return txt;
              }
            }
          },
          tooltip: {
            /*trigger: 'axis',*/
            show:true,
            textStyle :{
              fontSize:12
            },
          },
          xAxis: [{
            data: json.yearList,
            show:true,
            axisLine:{
              show:true,//显示x轴坐标线并设置为虚线
              lineStyle:{
                color:'#294363'
              }
            },
            axisTick:{
              show:false //不显示x轴坐标的刻度
            },
            axisLabel:{
              show:false //不显示x轴坐标数值
            }
          }, {
            data: json.yearList,
            gridIndex: 1,
            axisLine:{ //x轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{ //x轴的刻度短竖线是否显示
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            splitLine: {
              show: false
            },
            position:'right',
           /* minInterval:5,*/
            /*max:'dataMax',*/
            splitNumber:3,
            axisLine:{
              show:false,
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }, {
            splitLine: {
              show: true,
              lineStyle:{
                color:'#2a4565',
                type:'dashed'
              }
            },
            gridIndex: 1,
            axisLine:{
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          visualMap: [{
            show: true,
            dimension: 0,
            seriesIndex: 0,
            left: 'center',
            top: 'top',
            itemWidth:10,
            itemHeight:10,
            orient:"horizontal",
            textStyle:{
              color:'#fff'
            },
            pieces:[
              {
                lte: boundaryNum.preStart,
                color: '#129cff',
                symbol:'circle',
                label: '增长率（环比）',
              }, {
                gt: boundaryNum.preStart,
                lte: boundaryNum.nextEnd,
                symbol:'circle',
                color: '#67ffdb',
                label: '增长率（同比）'
              }
            ],
          }],
          series: [{
            type: 'line',
            showSymbol: true,
            data: json.yearlyGrowthRateList,
            symbolSize: 10,
            tooltip:{
              show:true,
              formatter:function(params){
                return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
              }
            },
            label:{
              show:true,
              position:'top',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              label:{
                position: 'start',
                /*formatter: '平均增长\n率{c}%',*/
                formatter: '{c}%',
                color:'#fff',
              },
              symbol: 'none',//设置平均线的没样式
              data : [
                {
                  type : 'average',
                  name: '平均增长率',
                  tooltip:{
                    show:true,
                    formatter(params){
                      return `<span style="color:${params.color}">平均增长率</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
                    }
                  }
                }
              ],
              lineStyle: {
                color:'#ff6a93'
              }
            }
          }, {
            type: 'bar',
            showSymbol: false,
            name: '个人支出比例',
            stack:'总额',
            data: json.yearlyPersonalPayRateList,
            color:'#ff6a93',
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1,
            z:2,
          },{
            type: 'bar',
            name:'增长额(正)',//此值与legend图例对应
            showSymbol: false,
            stack:'总额',
            color:'#ffd66a',
            tooltip:{
              show:true,
              formatter:function(params){
                return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
              }
            },
            data: json.positiveIncreaseQuotaList,
            label:{
              show:true,
              color:'#fff',
              position:'top',
              formatter:function(params){
                let val = ''
                let arr = json.yearlyPersonalPayRateList;
                arr.map((item,index)=>{
                  if(params.dataIndex==index){
                    if(Math.round((arr[index]+params.value)*100)%10==0){
                      val = (arr[index]+params.value).toFixed(1)
                    }else if(Math.round((arr[index]+params.value)*100)%100==0){
                      val = (arr[index]+params.value).toFixed(0)
                    }else{
                      val = (arr[index]+params.value).toFixed(2)
                    }
                  }
                })
                return val+'%';
              }
            },
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          },{
            type: 'bar',
            name:'增长额(负)',
            showSymbol: false,
            stack:'总额',
            tooltip:{
              show:true,
              formatter:function(params){
                return `<span style="color:#67ffdb">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
              }
            },
            itemStyle:{
             /* borderType:'dashed',
              borderColor:'#67ffdb',*/
              color:'#263b5e',
            },
            z:1,
            data: json.negativeIncreaseQuotaList,
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          }]
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
